<template>
    <div class="banner-component clearfix">
        <div class="inner">
            <wx-swiper
                class="swiper white-bg"
                autoplay="true"
                interval="3000"
                duration="1000"
                circular="true">
                <wx-swiper-item class="swiper-item" @click="onClickBanner(item)" v-for="(item, index) in banners" :key="index">
                    <img class="swiper-image" :src="item.image" mode="aspectFill" />
                </wx-swiper-item>
            </wx-swiper>
        </div>
    </div>
</template>

<script lang="ts">
import { ROUTE_NAME } from '@/lib/constant';
import {
    api,
} from '@/lib/api';

import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({
    name: 'Banner',
})
export default class Banner extends Vue {
    @Prop({ type: Array, required: true }) public banners: any;

    public onClickBanner(item: Shop.Banner) {
        if (item.url) {
            // wx.navigateTo({
            //     url: `/pages/web/main?src=${item.url}`,
            // });
            api.push({
                name: ROUTE_NAME.UTILS_WEB,
                query: {
                    src: item.url,
                },
            });
        } else if (item.aim === 'package') {
            // api.navigateTo({
            //     url: '/pages/pkg_detail/main',
            //     query: {
            //         pkg_id: item.link_id,
            //     },
            // });
            api.push({
                name: ROUTE_NAME.PKG_DETAIL,
                params: {
                    pkgId: item.link_id + '',
                },
            });
        } else if (item.aim === 'good') {
            // api.navigateTo({
            //     url: '/pages/product_detail/main',
            //     query: {
            //         product_id: item.link_id,
            //     },
            // });
            api.push({
                name: ROUTE_NAME.PRODUCT_DETAIL,
                params: {
                    productId: item.link_id + '',
                },
            });
        }
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.banner-component {
    height: 184px;
    .inner {
        box-sizing: border-box;
        padding: 10px;
        height: 136px;
        background: @primary-color;
        .swiper {
            margin-left: 50%;
            transform: translateX(-50%);
            width: 343px;
            height: 160px;
            border-radius: 4px;
            // box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
            overflow: hidden;
            .swiper-item {
                border-radius: 4px;
                .swiper-image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}

</style>
